<template>
  <div class="help-banner">
    <img v-if="user.header" class="bg-img" :src="user.header" alt="" />
    <img v-else class="bg-img" src="@/assets/sucai/help/banner.png" alt="" />
    <div class="mengceng"></div>
    <div class="con">
      <div class="title">创作者{{ user.nickname }}</div>
      <!-- <div class="desc">
        <span v-if="user.sex === 0">男</span>
        <span v-else-if="user.sex === 1">女</span>
        <span v-else>保密</span>
        <span class="dian"></span>
        <span v-if="user.birthday">{{ user.birthday }}</span>
      </div> -->
      <div class="remark">
        <div class="star">[</div>
        <div class="remark-text" v-html="user.remark"></div>
        <div class="end">]</div>
      </div>
    </div>
    <div class="tool" v-if="userInfo.id === user.id">
      <span @click="openChange">装饰主页</span>
      <span @click="handHidenChange">
        {{ user.showHome ? '隐藏主页展示' : '显示主页展示' }}
      </span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { inject } from 'vue'
import { storeToRefs } from 'pinia'
import { useAppsStore } from '@/stores/modules/app'
import loginApi from '@/service/api/login'
type PropsState = {
  user: any
}
const props = withDefaults(defineProps<PropsState>(), {
  user: () => {
    return {
      id: 0
    }
  }
})
const emit = defineEmits(['change'])
const openChange = inject('openChange') as () => void
const useStore = useAppsStore()
const { getUserInfo: userInfo } = storeToRefs(useStore)
const handHidenChange = async () => {
  const { code, msg } = await loginApi.doUpdInfo({
    showHome: props.user.showHome
  })
  if (code !== 0) {
    msgUtil.$message.error(msg)
    return
  }
  msgUtil.$message.success(props.user.showHome ? '已关闭' : '已开启')
  emit('change')
}
</script>

<style scoped lang="scss">
.help-banner {
  position: relative;
  .bg-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
  }
  .mengceng {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: rgba(0, 0, 0, 0.8);
  }
  .tool {
    position: absolute;
    top: 32px;
    right: 264px;
    z-index: 4;
    font-size: 16px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #dddddd;
    display: flex;
    user-select: none;
    span {
      display: block;
      cursor: pointer;
      position: relative;
      &:first-child {
        padding-right: 20px;
        &:before {
          content: '';
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 0;
          width: 0;
          height: 10px;
          border: 1px solid #fff;
        }
      }
      &:last-child {
        padding-left: 15px;
      }
    }
  }
  .con {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .title {
      font-size: 38px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 800;
      color: #ffffff;
    }
    .desc {
      margin-top: 12px;
      font-size: 13px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      display: flex;
      align-items: center;
      .dian {
        margin: 0 8px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #ffffff;
      }
    }
    .remark {
      width: 500px;
      margin-top: 32px;
      color: #ffffff;
      .star {
        margin-bottom: 2px;
        font-size: 20px;
      }
      .remark-text {
        text-align: center;
        white-space: pre-wrap;
        font-size: 14px;
        opacity: 0.8;
      }
      .end {
        margin-top: 2px;
        display: flex;
        justify-content: flex-end;
        font-size: 20px;
      }
    }
  }
}
</style>
